<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-
scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/y_index.css" />
    <style>
    .searchBox {
        height: 1rem;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    #search {
        width: 80%;
        padding-left: .5rem;
        background: url(../img/search.png) no-repeat;
        -webkit-background-size: .28rem .28rem;
        background-size: .28rem .28rem;
    }


    .lBox {
        width: 2rem;
        height: 11rem;
        position: fixed;
        border-right: 1px solid #e8e8e8;
    }

    .rBox {
        margin-left: 2rem;
    }

    .lBox li {
        height: 1rem;
        border-bottom: 1px solid #e8e8e8;
    }

    .lBox li.active {
        color: #fff;
        background: linear-gradient(to right, #6c8eda, #4bc0ed);
    }

    .bottom {
        height: 1rem;
        border-top: 1px solid #e8e8e8;
    }


    .wh {
        width: 0.68rem;
        height: 0.68rem;
        display: flex;
        color: #666;
        font-size: .32rem;
        justify-content: center;
        align-items: center;
    }

    b {
        font-weight: normal;
    }

    #pay {
        width: 2rem;
        height: 1rem;
        background: linear-gradient(to right, #6c8eda, #4bc0ed);
        color: #fff;
    }

    .tip {
        position: absolute;
        width: 0.3rem;
        height: 0.31rem;
        background: #ff6a6a;
        color: #fff;
        font-size: 0.24rem;
        top: -0.1rem;
        left: 100%;
        border-radius: 1rem;
    }

    .btn {
        width: 1.6rem;
        height: 100%;
        color: #fff;
    }

    .del_btn {

        background: linear-gradient(to right, #0fa3a5, #3ec2c9);
    }
    /*选择*/

    input[name=cart]:checked+span {
        background: url(../img/check.png) no-repeat;
        background-size: 100% 100%;
    }
    
    input[name=allChose]:checked+span {
        background: url(../img/check.png) no-repeat;
        background-size: 100% 100%;
    }

    .c {
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #e8e8e8;
        display: block;
        margin-right: .2rem;
    }

    .cir {
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
        border: 1px solid #ccc;
    }
    </style>
</head>

<body>
    <div class="bigBox">
        <div class="container">
            <div class="bigBox">
                <ul class="container">
                    <div class="mainBox"></div>
                    <!--          <label class="list flex_a bw p20 bdb"> <div> <input type="checkbox" name="cart" hidden="" /> <span class="c"></span> </div> <div class="flex"> <img class="img" src="../img/y_8.png" style="width:1.7rem;height:1.5rem;" /> <ul class="ml20"> <a href="y_shopDetail.html">OBC 无线双耳超小隐形蓝牙挂耳式耳机 运动跑步必备</a> <p class="col9 mt20">分类：分类1</p> <li class="c4 mt10 font16 flex_sa"> <span class="c4 font19">￥1920.00</span> <div class="flex c_box"> <label class="wh minus border1 border-r1"> <button class="font18 col9">&minus;</button> </label> <input class="font18 wh tac num" type="number" name="" value="0" /> <label class="wh add bgce border-r1"> <button class="font18 col9">+</button> </label> </div> </li> </ul> </div> </label> -->
            </div>
            </ul>
        </div>
        <div class="bw flex bottom">
            <div class="flex1 flex_a flex_sb plr24">
                <ul class="flex">
                    <label class="flex" id="allChose"><input type="checkbox" name="allChose" hidden=""/><span class="cir flex mr20"></span>全选</label>
                    <li onclick="del()"><span class="ml50 c2" id="del">删除</span></li>
                </ul>
                <li class="flex">合计：<span class="c4 t_price">￥0.00</span></li>
            </div>
            <div class="flex" style="height:100%;">
                <span class="pay_btn flex_aj bgc1 btn" onclick="pay()">下单</span>
            </div>
        </div>
    </div>
</body>

</html>
<script src="../js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/dlc.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.0/alipayjsapi.inc.min.js"></script>
<!--公司的常用函数封装-->
<script>
var delArr = [];
if (getLocalData('shopArr').length > 0) {
    var arr = getLocalData('shopArr');
} else {
    var arr = []
}
// 获取购物车信息
getShopCar();

function getShopCar() {
    if (arr.length > 0) {
        var str = '';
        arr.forEach((item, index) => {
            item.chose = 0;
            if (item.goodsNum > 0) {
                str += '<label class="list flex_a bw p20 bdb" data-id=' + item.goodsId + '> <div> <input class="cart" type="checkbox" name="cart" hidden="" /> <span class="c"></span> </div> <div class="flex flex1"> <img class="img" src="' + item.imgUrl + '" style="width:1.7rem;height:1.5rem;" /> <ul class="ml20 flex1"> <a href="./ser_detail.html">' + item.goodsName + '</a> <p class="col9 mt20">分类：' + item.c_name + '</p> <li class="c4 mt10 font16 flex_sa"> <span class="c4 font19">￥' + Number(item.goodsPrice).toFixed(2) + '</span> <div class="flex c_box"> <label class="wh minus border1 border-r1"> <button class="font18 col9" data-index="0" onclick="count(this)">&minus;</button> </label> <input class="font18 wh tac num" type="number" name="" value="' + item.goodsNum + '" data-price=' + item.goodsPrice + ' disabled> <label class="wh add bgce border1 border-r1"> <button class="font18 col9" data-index="1" onclick="count(this)">+</button> </label> </div> </li> </ul> </div> </label>'
            }
        })
        if (str) {
            $('.mainBox').html(str);
        } else {
            $('.mainBox').html(emptyTip('暂无数据'));
        }
    } else {
        $('.mainBox').html(emptyTip('暂无数据'));
    }
}
var tip = $('.tip').text() * 1,
    total = $('.t_price').text().split('￥')[1] * 1,
    status = 0;

function count(_this) {
    var price = $(_this).parents('.list').find('.num').data('price');
    var id = $(_this).parents('.list').data('id');
    if ($(_this).data('index') == 0) { //减
        var num = $(_this).parents('.list').find('.num').val() * 1 - 1;
        tip = tip - 1;
        total = total * 1 - price * 1;

    } else { //加
        var num = $(_this).parents('.list').find('.num').val() * 1 + 1;
        tip = tip + 1;
        total = total * 1 + price * 1;
    }
    if (num >= 0) {
        $(_this).parents('.list').find('.num').val(num);
        $('.tip').text(tip);
        sum();
        arr.forEach((item, index) => {
            if (item.goodsId == id) {
                item.goodsNum = $(_this).parents('.list').find('.num').val() * 1;
                status = 1;
            }
        })
        if (status) {
            saveLocalData('shopArr', arr);
            // getShopCar();
        }
    }
}

$('.mainBox').on('click','.list',function(){
	console.log($('.cart:checked').length)
	if($('.cart:checked').length === $('.cart').length){
		$('input[name=allChose]').prop('checked', true);
	}else{
		$('input[name=allChose]').prop('checked', false);
	}
})

$('input[name=allChose]:checked').prop('checked',false)

$('#allChose').on('touchend',function(){  //全选
	var status = $('input[name=allChose]:checked').prop('checked')==true?true:false
	console.log(status)
if(status){
	$('.cart').prop('checked', false);
	sum();
}else{
	$('.cart').prop('checked', true);
    arr.forEach((item, index) => {
        delArr.push(item.goodsId);
        item.chose = 1;
    })
    saveLocalData('shopArr', arr);
    sum();
}
    
})

function del() { //删除
    delArr = [];
    var arr = getLocalData('shopArr');
    if($('.cart:checked').length==0){
    	dlctipbox.show('请先选择要删除的商品')
    	return false
    }else{
    	for (var i = 0; i < $('.cart:checked').length; i++) {
	        delArr.push($('.cart:checked').eq(i).parents('.list').data('id'));
	    }
    }
    console.log(delArr);
    dlctipbox.confirm('确定要删除吗？', function(res) {
        if (res == 1) {
            console.log(arr)
            arr.forEach((p1, p2) => {
                delArr.forEach((p3, p4) => {
                    console.log(p3)
                    console.log(1)
                    if (p1.goodsId == p3) {
                        p1.goodsNum = 0;
                    }
                })
            })
            saveLocalData('shopArr', arr);
            location.reload();
        }
    })
}
// 统计
function sum() {
    total = 0;
    for (var i = 0; i < $('.cart:checked').parents('.list').length; i++) {
        var single_price = $('.cart:checked').parents('.list').find('.num').eq(i).data('price');
        var single_num = parseInt($('.cart:checked').parents('.list').find('.num').eq(i).val());
        total += single_price * single_num;
    }
    $('.t_price').text(Number(total).toFixed(2));
}
$('body').on('change', '.cart', function() {
    sum();
})

function pay() {
    var choseArr = [];
    if ($('.cart:checked').length == 0) {
        dlctipbox.show('请先选择商品~')
    } else { //选中下单的让chose为1
        for (var i = 0; i < $('.cart:checked').length; i++) {
            choseArr.push($('.cart:checked').eq(i).parents('.list').data('id'))
        }
        console.log(choseArr)
        arr.forEach((p1, p2) => {
            for (i in choseArr) {
                if (p1.goodsId == choseArr[i]) {
                    p1.chose = 1;
                    break;
                } else {
                    if (i == choseArr.length - 1) {
                        p1.chose = 0;
                    }
                }
            }
        })
        saveLocalData('shopArr', arr);
        var sum = $('.t_price').text();
        location.href = 'ser_confirmOrder.html?sum=' + sum;
    }
}
</script>